

/*** Globals ***/
var mousePos = { x:0, y: 0 };
var Boids = new Array();
var canvas = null;
var opt_distance = 25;

var current_dialog_scene = null;

var scene_template = " \
   <div class='scene' id='${id}'> \
      <table> \
         <tr> \
            <td class='title'>${title}</td> \
            <td><button id='${id}_btn_edit'>change info</button></td> \
         </tr> \
         <tr> \
            <td class='video'></td> \
            <td class='links'>L</td> \
         </tr> \
      </table> \
   </div>";

function show_edit_dialog(scene) {
   // remember the current scene
   current_dialog_scene = scene;

   // update dialog fields
   $("#edit_scene_name").val(scene.title);
   $("#edit_scene_quest").val(scene.question);
   $("#edit_scene_url").val(scene.url);

   // show the dialog
   $("#edit_scene_dialog").dialog("open");
}

function edit_dialog_apply() {
   scene = current_dialog_scene;
   scene.title = $("#edit_scene_name").val();
   $("#edit_scene_dialog").dialog("close");
   update_scene(scene);
}

function update_scene(scene) {
   obj = "#" + scene.id
   $(obj+" .title").html(scene.title);
   //add_scene
}

function add_scene(scene) {
   // inject the html building from template :)
   obj = "#" + scene.id
   html = tmpl(scene_template, scene)
   $("#scenecontainer").append(html);

   // shadow change on mouse events
   $(obj).mouseenter(function() {
      $(this).addClass("scene_hover");});
   $(obj).mouseleave(function() {
      $(this).removeClass("scene_hover");});
   $(obj).mousedown(function() {
      $(this).addClass("scene_dragging");});
   $(obj).mouseup(function() {
      $(this).removeClass("scene_dragging");});

   // make the div dragable (ui)
   $(obj).draggable({stack: "#scenecontainer div"});
   $(obj+"_btn_edit").button({
            icons: { primary: "ui-icon-comment"},
            text: false })
            .click(function() {
               
               show_edit_dialog(scene)
               });
}

function populate_story(scenes) {
   jQuery.each(scenes, function(idx, scene) {
      add_scene(scene);
   });
}



/*** ON LOAD ***/
$(document).ready(function() {
   $(".debug").html("document.ready()");

   // create the scene edit dialog
   $( "#edit_scene_dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: false,
      buttons: {"Cancel": function() {$(this).dialog("close")},
                "Apply": edit_dialog_apply
               },
   });

   var MyStory = {
      0: {id: "scn_0", title: "first", url: "http://youtube.ect...",
          question: "prima domanda", answers: [
            {text: "prima risposta", linkid: 1},
            {text: "seconda risposta", linkid: -1},
            {text: "terza risposta", linkid: -1},
            ]},
      1: {id: "scn_1", title: "second", url: "http://youtube.ect...",
          question: "the end", answers: null}
   };
   
   populate_story(MyStory);
});

$(document).keypress(function(e) {
    $(".debug").html("keypress "+e.which);
});
   
window.onresize = function(event) {
   $(".debug").html("Resize "+window.innerWidth+" "+window.innerHeight);
}

